<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/allclothes.css">
</head>
<body>
<div class="hd"></div>
<div class=" Search">
<input id="searchInput" class="search-input" type="text" placeholder="搜索其他喜欢的衣服">
<button class="search-btn btn">搜索</button>
</div>
<div id="main">
	<div class="demo">
		<div class="box">
		<a href="man1-clothes.html">
			<img src="images/mc1-1.jpg" width="250" height="300">
			<h4>¥<span>299.00</span></h4>
			<p>2019年 男装牛仔外套</p></a>
			<a href="#" class="button orange addcar">加入购物车</a>
		</div>
		<div class="box">
		<a href="woman1-clothes.html">
			<img src="images/woman1-1.jpg" width="250" height="300">
			<h4>¥<span>499.00</span></h4>
			<p>2019年 女装羽绒外套</p></a>
			<a href="#" class="button orange addcar">加入购物车</a>
		</div>
		<div class="box">
		<a href="woman2-clothes.html">
			<img src="images/woman2-1.jpg" width="250" height="300">
			<h4>¥<span>899.00</span></h4>
			<p>2019年 女装羽绒大衣</p></a>
			<a href="#" class="button orange addcar">加入购物车</a>
		</div>
		<div class="box">
		<a href="woman3-clothes.html">
			<img src="images/woman3-1.jpg" width="200" height="300">
			<h4>¥<span>699.00</span></h4>
			<p>2019年 女装长款羽绒大衣</p></a>
			<a href="#" class="button orange addcar">加入购物车</a>
		</div>
		<div class="box">
		<a href="man2-clothes.html">
			<img src="images/mc2-1.jpg" width="250" height="300">
			<h4>¥<span>399.00</span></h4>
			<p>2019年 男装时尚卫衣</p></a>
			<a href="#" class="button orange addcar">加入购物车</a>
		</div>
		<div class="box">
		<a href="man3-clothes.html">
			<img src="images/mc3-1.jpg" width="200" height="300">
			<h4>¥<span>799.00</span></h4>
			<p>2019年 男装长款羽绒卫衣</p></a>
			<a href="#" class="button orange addcar">加入购物车</a>
		</div>
	</div>
	</div>
	<div class="m-sidebar">
		<div class="me">
			<i id="end"></i>
			<a href="me.html"><span class="carstext">个人中心</span></a>
		</div>
		<div class="cart">
			<i id="end"></i>
			<a href="cars.html"><span class="carstext">购物车</span></a>
		</div>
		<div class="scj">
			<i id="end"></i>
			<a href="shoucangjia.html"><span class="carstext">收藏夹</span></a>
		</div>
	</div>
	<div id="msg">已成功加入购物车！</div>
</div>
<div style="text-align:center;clear:both;"><br><br><br><br><br><br><br>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(function() {
	var offset = $("#end").offset();
	$(".addcar").click(function(event){
		var addcar = $(this);
		var img = addcar.parent().find('img').attr('src');
		var flyer = $('<img class="u-flyer" src="'+img+'">');
		flyer.fly({
			start: {
				left: event.pageX,
				top: event.pageY
			},
			end: {
				left: offset.left+10,
				top: offset.top+10,
				width: 0,
				height: 0
			},
			onEnd: function(){
				$("#msg").show().animate({width: '250px'}, 200).fadeOut(1000);
				addcar.css("cursor","default").removeClass('orange').unbind('click');
				this.destory();
			}
		});
	});
  
});
</script>
</html>
